<template>
  <div class="text-collapser">
    <div v-if="isExpanded || textLength <= maxLength" class="full-text">
      {{ text }}
    </div>
    <div v-else class="collapsed-text">
      {{ text.slice(0, maxLength) }}...
    </div>
    <button v-if="textLength > maxLength" @click="toggle" class="toggle-btn">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'TextCollapser',
  props: {
    text: {
      type: String,
      required: true
    },
    maxLength: {
      type: Number,
      default: 100
    },
    expandText: {
      type: String,
      default: '展开'
    },
    collapseText: {
      type: String,
      default: '收起'
    }
  },
  data() {
    return {
      isExpanded: false
    }
  },
  computed: {
    textLength() {
      return this.text.length
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style scoped>
.text-collapser {
  position: relative;
}
.full-text, .collapsed-text {
  line-height: 1.5;
  margin-bottom: 8px;
}
.toggle-btn {
  background: none;
  border: none;
  color: #409EFF;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
</style>
